---
id: 6143869bb45bd85e3b1926aa
title: Schritt 4
challengeType: 0
dashedName: step-4
---

# --description--

Erstelle innerhalb des `.heading`-Elements ein `header`-Element mit `hero` als Wert für die `class`.

Erstelle innerhalb dieses Elements ein `img`-Element mit `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png` als Wert für die `src`, mit `freecodecamp logo` als Wert für `alt` und mit `hero-img` als Wert für die `class`.

Das `loading`-Attribut bei einem `img`-Element kann auf `lazy` gesetzt werden, um dem Browser mitzuteilen, dass er die Bildressource nicht abrufen soll, bis sie benötigt wird (d. h., wenn der Benutzer scrollt und das Bild in der Ansicht erscheint). Ein weiterer Vorteil liegt darin, dass "lazy-geladene" Elemente erst dann geladen werden, wenn die "non-lazy" Elemente geladen sind - das bedeutet, dass Nutzer mit langsamen Internetverbindungen den Inhalt deiner Seite sehen können, ohne auf das Laden der Bilder warten zu müssen.

Weise deinem neuen `img`-Element ein `loading`-Attribut zu, dass auf `lazy` eingestellt ist.

# --hints--

Du solltest ein `header`-Element erstellen.

```js
assert.exists(document.querySelector('header'));
```

Dein `header`-Element sollte sich innerhalb deines `.heading`-Elements befinden.

```js
assert(document.querySelector('header')?.parentElement?.className === 'heading');
```

Dein `header`-Element sollte die `class` auf `hero` eingestellt haben.

```js
assert(document.querySelector('header')?.className === 'hero');
```

Du solltest ein `img`-Element erstellen.

```js
assert.exists(document.querySelector('img'));
```

Dein `img`-Element sollte sich innerhalb deines `header`-Elements befinden.

```js
assert(document.querySelector('img')?.parentElement?.localName === 'header');
```

Dein `img`-Element sollte die `src` auf `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png` eingerichtet haben.

```js
assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png');
```

Dein `img`-Element sollte den `alt` auf `freecodecamp logo` eingerichtet haben.

```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
```

Dein `img`-Element sollte das `loading`-Attribut auf `lazy` eingerichtet haben.

```js
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
```

Dein `img`-Element sollte die `class` auf `hero-img` eingerichtet haben.

```js
assert(document.querySelector('img')?.className === 'hero-img');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
--fcc-editable-region--
    <main>
      <section class="heading">

      </section>
    </main>
--fcc-editable-region--
  </body>
</html>
```

```css

```
